"use client"

import { getReportDetail } from "@/api/team/report"
import { getTeamUser } from "@/api/team/tember/user"
import { updateReportXH } from "@/api/team/update"
import { selectUserDetail } from "@/lib/features/login/loginSlice"
import { useAppSelector } from "@/lib/hooks"
import { ReportType, XingHaoType } from "@/type/report"
import { Button, ButtonGroup } from "@nextui-org/button"
import { Card, CardBody, CardHeader } from "@nextui-org/card"
import { Input } from "@nextui-org/input"
import { useEffect, useState } from "react"
import toast from "react-hot-toast"

const Supervise = () => {

    const { user_id } = useAppSelector(selectUserDetail)

    const [detail, setDetail] = useState<ReportType | null>(null);

    const [xh, setXh] = useState<XingHaoType[] | null>(null)

    const getSuperviseData = async () => {
        const result = await getTeamUser(user_id as number)
        if (result.code == 200) {

            const dt = await getReportDetail(result.data.r_id)

            if (dt.code == 200) {
                if (dt.data.xh != "" && dt.data.xh != undefined) {
                    setXh(JSON.parse(dt.data.xh))
                }
                setDetail(dt.data)
            }
        } else {
            setDetail(null)
        }
    }

    const submitXH = async () => {
        if (detail != undefined) {
            detail.xh = JSON.stringify(xh)
            const result = await updateReportXH(detail)
            if (result.code == 200) {
                toast.dismiss()
                return toast.success(result.message)
            }
        }
        toast.error("提交失败 ❌")
    }

    useEffect(() => {
        getSuperviseData()
    }, [])

    return (
        <>
            <div className="w-full min-h-svh bg-gradient-to-tr from-[#FFB457] to-[#FF705B] justify-center relative flex items-center border-default-200 dark:border-default-100 px-2 overflow-hidden">
                <Card
                    isBlurred
                    className="border-none bg-background/60 dark:bg-default-100/50 max-w-[610px]"
                    shadow="sm"
                >
                    <CardHeader className="justify-between">
                        <h1>产品型号</h1>
                        <Button onPress={() => submitXH()} size="sm" color="primary">提交</Button>
                    </CardHeader>
                    <CardBody>
                        {
                            xh == null ? <h1>未被分配</h1> :
                                xh.map((item) => {
                                    return (
                                        <div key={item.key} style={{ borderColor: "#ff9900b0" }} className="text-center my-1 rounded-md border-1 p-1">
                                            <Input
                                                color="secondary"
                                                size="sm"
                                                label={item.name}
                                                value={item.price + ""}
                                                isReadOnly
                                                type="number"
                                            />
                                            <ButtonGroup className="mt-2 w-full">
                                                <Button onPress={() => {
                                                    setXh(xh.filter((v) => {
                                                        if (v.key == item.key) {
                                                            v.price += 1
                                                        }
                                                        return true
                                                    }))
                                                }} fullWidth color="success" size="sm">Add</Button>
                                                <Button onPress={() => {
                                                    setXh(xh.filter((v) => {
                                                        if (v.key == item.key) {
                                                            v.price -= 1
                                                        }
                                                        return true
                                                    }))
                                                }} fullWidth color="danger" size="sm">Del</Button>
                                            </ButtonGroup>
                                        </div>
                                    )
                                })
                        }

                    </CardBody>
                </Card>
            </div>
        </>
    )
}

export default Supervise